<template>
	<a-space direction="vertical" size="large" style="width:100%">
		<Statistics></Statistics>
		<a-card title="销售数据" >
			<template #extra>
				<a-form
					layout="inline"
					@submit="onSearch"
					class="no-m-b"
				>
					<a-form-item label="小店名称">
						<a-input allowClear v-model:value="table.query.shop_name" placeholder="请输入小店名称">
						</a-input>
					</a-form-item>
					<a-form-item label="销售时间">
						<a-range-picker v-model:value="table.query.date" valueFormat="YYYY-MM-DD"/>
					</a-form-item>
					<a-form-item>
						<a-space>
							<a-button type="primary" html-type="submit">
								搜索
							</a-button>
							<a-button
								type="dashed"
								@click="resetQuery"
							>
								重置
							</a-button>
						</a-space>
					</a-form-item>
				</a-form>
			</template>
			<normal-table :data="table.data" :page="table.page" :pageSize="table.page_size" :total="table.total_count" :loading="table.loading" @onPageChange="pageChange" @onSizeChange="sizeChange" border striped="#fafafa">
				<el-table-column prop="shop_name" label="小店名称" align="center" />
				<el-table-column prop="order_goods_count" label="销售商品总数（件）" align="center" />
				<el-table-column prop="sales_amount" label="销售总额" align="center" >
					<template #default="scope">
						￥{{scope.row.sales_amount}}
					</template>
				</el-table-column>
				<el-table-column prop="bonus_amount" label="佣金" align="center" >
					<template #default="scope">
						￥{{scope.row.bonus_amount}}
					</template>
				</el-table-column>
				<el-table-column prop="org_name" label="所属校区" align="center" />
				<el-table-column prop="opening_at" label="开店时间" align="center" />
			</normal-table>
		</a-card>
	</a-space>
</template>

<script lang="ts">
import { onMounted, ref } from 'vue'
import Controller from './controller'
import Statistics from './statistics/index.vue'
export default {
    name:"dashborad",
	components:{
		Statistics
	},
	setup(){
		var controller=new Controller()

		onMounted(()=>{
			controller.getTableData()
		})

		return {
			...controller.getState(),
			...controller.getMethods()
		}
	}
}
</script>

<style lang="scss" scoped>

.no-m-b .ant-form-item{
	margin-bottom: 0px!important;
}
</style>
